#{extends 'main.html' /}
#{set title:'Home' /}


#{if selection=="upcoming"}
<a class=highlighted href="@{Application.index("upcoming", cat, initial)}">&nbsp;Upcoming events&nbsp;</a>
<a class=text href="@{Application.index("popular", cat, initial)}">&nbsp;Popular events&nbsp;</a>
#{/if}
#{if selection=="popular"}
<a class=highlighted href="@{Application.index("popular", cat, initial)}">&nbsp;Popular events&nbsp;</a>
<a class=text href="@{Application.index("upcoming", cat, initial)}">&nbsp;Upcoming events&nbsp;</a>
#{/if}

#{if cat!=null || initial!=null}
Other Filters:
	#{if cat!=null}
		<a class=text href="@{Application.index(selection, null, initial)}">&nbsp;${cat} <img src="/public/images/close_button.png" width="10" height="10"> &nbsp;</a>
	#{/if}
	#{if initial!=null}
		<a class=text href="@{Application.index(selection, cat, null)}">&nbsp;${initial} <img src="/public/images/close_button.png" width="10" height="10"> &nbsp;</a>
	#{/if}	
#{/if}

#{ifErrors}
<div class="error">
    <h2>Oops, please correct these errors</h2>
</div>
#{/ifErrors}
             
        <br>
        <div id="line1">
 
        #{list items:preselectedEvents, as:'event' }
        <div class="box">
        <a href="@{Events.show(event.id)}"><img height="100" width="100" src="@{Events.showPicture(event.id)}"></a>
    	</div>
    	#{/list}
 		</div>
 		
 		<div id="line2">
        #{list items:preselectedEvents, as:'event' }
        <div class="box">       
        <p><a href="@{Events.show(event.id)}"><strong>${event.name}</strong></a></p>
        <p>${event.city} on ${event.startDate.format('dd.MM.yyyy')}</p>
        <a class="showOffers" href="@{Application.showOffers(event.id, 0, 0, true)}">&nbsp;Offers&nbsp;</a>
    	</div>
    	#{/list}
 		</div>


		#{list items:firstletters,as:'firstletter'}
			<a class="showOffers" href="@{Application.index(selection, cat, firstletter)}">&nbsp;${firstletter}&nbsp;</a>		
		#{/list}

		<br>
		<div id="styledForm">
		#{form @Application.showEvents()}   
			<fieldset>
			<div class="field">
			<label for="event">Event</label>
			<select size="1" name="name" id=event>
            	#{list items:dropdownEventList, as:'event'}
                	<option value="${event}">${event}</option>
            	#{/list}
			</select>
			</div>

			<div class="field">
            	<label for="fromPrice">From</label>                  
            	<input id="fromPrice" type="text" name="fromPrice" size="30" value="${params.fromPrice}"/> Euro
        	</div>
        	
        	<div class="field">
            	<label for="toPrice">To</label>                  
            	<input id="toPrice" type="text" name="toPrice" size="30" value="${params.tPrice}"/> Euro
        	</div>
 
 			<div class="field">
 			<label for="includePrivateOffers">Private offers</label>
			<input type="checkbox" name="includePrivateOffers" value="true" ${flash.includePrivateOffers ? 'checked="true"' : ''}><br><br>
    		<input type="submit" class="submit" value=" find a place to stay! " />
			</div>
			</fieldset>
		#{/form}
		</div>